<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>呆呆鸟度假酒店首页</title>
    <link rel="stylesheet" href="../views/static/common/layui/css/layui.css">
    <link rel="stylesheet" href="../views/static/admin/css/style.css">
    <script src="../views/static/common/layui/layui.js"></script>
    <script src="../views/static/common/jquery-3.3.1.min.js"></script>
    <script src="../views/static/common/vue.min.js"></script>
    <style>
        .right h2{
            margin: 10px 0;
        }
        .right li{
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--顶栏-->
    <header>
        <div style="float:left;"><img src="../views/static/admin/img/tubiao.png" width="152" height="55" /></div>
        <div style="float: right">
            <i  class="layui-icon  layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 30px; color: #969baa;">&#xe614;</i>&nbsp; &nbsp; &nbsp;
        </div>
    </header>

    <div class="main" id="">
        <!--左栏-->
        <div class="left">
            <ul class="cl" >
                <!--顶级分类-->
                <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                    <a href="javascript:;" :class="{active:vo.active}" @click="onActive(index)">
                        <i class="layui-icon" v-html="vo.icon"></i>
                        <span v-text="vo.name"></span>
                        <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active" class="layui-icon active">&#xe623;</i>
                    </a>
                    <!--子级分类-->
                    <div v-for="vo2,index2 in vo.list">
                        <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)" v-text="vo2.name"></a>
                        <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                    </div>
                </li>
            </ul>
        </div>
        <!--右侧-->
        <div class="right">
            <blockquote class="layui-elem-quote">
                    <h2>欢迎进入呆呆鸟度假酒店</h2>


                <%-- 显示系统当前时间--%>
                <div id="datetime">
                    <script>
                        setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);
                    </script>
                </div>

            </blockquote>

            <div class="layui-row">
                <div class="layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header"><h2>酒店位置</h2></div>
                        <div class="layui-card-body" style="height: 250px;">
                            <ul>
                                <li>位置：</li>
                                <li>惠州市大亚湾霞涌华润小径湾观海轩2栋2单元507号</li>
                                <li>这边提供如下三个地图供您查看酒店位置：</li>
                                <li><a href="https://map.baidu.com/poi/%E6%83%A0%E5%B7%9E%E5%91%86%E5%91%86%E9%B8%9F%E6%B5%B7%E8%BE%B9%E5%BA%A6%E5%81%87%E9%85%92%E5%BA%97/@12768671.377331913,2590754.7228320655,18.42z?uid=bb8fd97e5437adb86fc02c84&ugc_type=3&ugc_ver=1&device_ratio=2&compat=1&pcevaname=pc4.1&querytype=detailConInfo&da_src=shareurl" target="_blank" class="layui-btn layui-btn-radius layui-btn-normal">百&nbsp度&nbsp地&nbsp图</a></li>
                                <li><a href="https://www.amap.com/" target="_blank" class="layui-btn layui-btn-radius">谷&nbsp歌&nbsp地&nbsp图</a></li>
                                <li><a href="https://map.qq.com/" target="_blank" class="layui-btn layui-btn-radius layui-btn-warm">腾&nbsp讯&nbsp地&nbsp图</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header"><h2>酒店附近</h2></div>
                        <div class="layui-card-body" style="height: 250px;">
                            <ul>
                                <li>酒店距离大巴车站大约500m左右；</li>
                                <li>酒店楼下拥有美食城、超市；</li>
                                <li>酒店距离后面大约200m左右，由于疫情原因，打车需要到这里进行上下车；</li>
                                <li>如果有快递寄到酒店，需要到酒店对面的菜鸟驿站进行自取</li>
                                <li>如果有需要叫外卖可以通过下面进行下单：</li>
                                    <a href="https://gz.meituan.com/" target="_blank" class="layui-btn layui-btn-normal">美&nbsp团</a>
                                    <a href="https://www.ele.me/" target="_blank" class="layui-btn layui-btn-normal">饿&nbsp了&nbsp么</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md4">

                    <div class="layui-card">
                        <div class="layui-card-header"><h2>酒店介绍</h2></div>
                        <div class="layui-card-body" style="height: 250px;">
                            <ul>
                                <li>酒店装修时尚高雅，设施齐全，环境舒适。</li>
                                <li>拥有高端客房，酒店还配有超市、杨国福、湖边纸包鱼、理发店等，服务配套与娱乐设施一应俱全。</li>
                                <li>酒店以“宾客至上，服务第一”为宗旨，采用了科学的经营的方法。</li>
                                <li>无论商务、聚会、休闲、娱乐，都是您的理想之选。</li>
                                <li>呆呆鸟度假酒店，诚心恭候您的光临！</li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="../views/static/admin/js/config.js"></script>
<script src="../views/static/admin/js/script.js"></script>
<script type="text/javascript">

</script>
</body>
</html>
